<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邮箱验证原子组的使用</title>
</head>
<body>
    <input type="text" name="email">
    <span></span>
</body>
<script>
    const input = document.querySelector(`[name = "email"]`)
    const span = document.getElementsByTagName('span')[0]
    // 下面的代码就是类似与Vue的双向数据绑定 
    input.addEventListener('keyup',function(){
        const reg = /^[\w-]+@([\w]+\.)+(org|com|cn|cc)$/i
        if(reg.test(input.value)){
            span.innerHTML = '正确'
        }else{
            span.innerHTML = '错误'
        }
    })
</script>
</html>